<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#areaDiv{
				height: 100px;
				width: 300px;
				border: 1px solid black;
			}
			#showMsg{
				height: 40px;
				width: 300px;
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<div id="areaDiv"></div>
		<div id="showMsg"></div>
		<script type="text/javascript">
			//当鼠标在area中移动时，在showMsg中获取鼠标的坐标
			var areaDiv = document.getElementById("areaDiv");
			var showMsg = document.getElementById("showMsg");
			//onmousemove
			//	-该事件会在鼠标移动时触发
			//事件对象 event
			//	-当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为参数传递相应函数
			//	-在事件对象中封装了当前事件的一切信息，比如鼠标的坐标键盘的那个建被按下，时间
			//	-在ie8及以下中相应函数被触发时，浏览器不会传递事件对象，
			//	-在IE8及以下的浏览器中，时将事件对象作为window对象的属性保存的window.event
			// 	if(!event){
			// 		event = window.event;
			// 	}
			//  或者
			//	event = event || window.event;
			//	用这种方法来除了兼容性的问题
			areaDiv.onmousemove = function(event){
				//在showMsg中显示鼠标的坐标
				//clientX可以获取水平坐标
				//clientY可以获取垂直坐标
				var x = event.clientX;
				var Y = event.clientY;
				showMsg.innerHTML = " x = " + x + " y = " + Y;
			}
			
		</script>
	</body>
</html>
